<!--
 * @Author: Zhao Weiwen
 * @Date: 2021-06-16 15:01:47
 * @LastEditTime: 2021-06-16 15:01:48
 * @LastEditors: 总结vue入门经验
 * @Description: In User Settings Edit
 * @FilePath: \vueDemo\vue\09-入门vue小节.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        vue是一个前端框架
        vue的编写一般包括视图层和脚本层的代码编写
        视图层：负责页面渲染，主要由html和css构成，脚本：负责业务数据模型和数据的处理逻辑

        vue的核心对象  new Vue({
            el
            data
            methods
            this指代当前的vue对象
        })

        vue两个核心部分：
        脚本部分：
            vue核心对象Vue
            选项列表
            el：接收获取的元素
            data：保存数据
            methods：定义方法
        视图部分：
            数据绑定：{{ }}双括号法 
            属性不能使用{{ }}这个获取 可以使用指令的方式 v-


        Vue常用指令：使用指令时，通常编写在标签的属性上，值可以使用 JS 的表达式
            v- --- 指令 简写形式 ：属性名
            文本插值： v-html：把文本解析为HTML代码
            绑定属性： v-bind：为HTML标签绑定属性值 也可以简写为 ：href
            条件渲染： v-if：条件为true渲染元素 v-else-if v-else
            v-show:根据条件展示某元素，
                        v-show:也是根据条件展示某元素，区别在于切换的是display的属性的值
            列表渲染v-for： for in 遍历容器元素或者对象的属性
            事件绑定：v-on：为html中标签绑定事件
            表单绑定：v-model：在表单元素上创建双向数据绑定

            ——————表单绑定实现双向数据绑定：
            ——————双向数据绑定：更新data数据，页面中的数据也会更新，更新页面数据，data数据也会更新
            MVVM模型（ModelViewViewModel）——是MVC模式的改进版
            在前端页面中，js对象表示Model，页面表示View，两者分离，将Model和View关联起来就是ViewModel
            。ViewModel负责把model的数据同步到view显示，还负责把view修改的数据同步会model
            
     -->
</body>

</html>